export default {
    template: `
        <div class="home-page">
            <el-button type="primary" @click="fetchMembers">刷新数据</el-button>

            <!-- 会员表格 -->
            <el-table :data="members" border class="fixed-table">
                <el-table-column prop="id" label="ID" width="60"></el-table-column>
                <el-table-column prop="name" label="会员名称"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
                <el-table-column prop="sort" label="排序" width="80"></el-table-column>
                <el-table-column prop="status" label="状态" width="80">
                    <template #default="{ row }">
                        <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                            {{ row.status === 1 ? '正常' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页始终在底部 -->
            <div class="pagination-container">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="page"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    `,
    data() {
        return {
            members: [],
            page: 1,
            total: 0
        };
    },
    methods: {
        async fetchMembers() {
            try {
                const response = await fetch(`/member/index?page=${this.page}`);
                const res = await response.json();
                if (res.status === 1) {
                    this.members = res.data.members;
                    this.total = res.data.total;
                } else {
                    ElMessage.error('获取数据失败');
                }
            } catch (error) {
                ElMessage.error("数据加载失败");
            }
        },
        handlePageChange(newPage) {
            this.page = newPage;
            this.fetchMembers();
        }
    },
    mounted() {
        this.fetchMembers();
    }
};
